import { PureComponent } from "react"

import { StoreContext } from './context'

/**
 * 
 * @param {store的数据, 是一个函数} mapStateToProps 
 * @param {store的方法, 是一个函数} mapDispatchProps 
 */
export function connect(mapStateToProps, mapDispatchProps) {
  // 返回一个函数
  return function enhanceHOC(WrappedComponent) {
    // 这个函数返回的是一个组件
    const EnhanceComponent = class extends PureComponent {
      constructor(props, context) {
        super(props, context)
        this.state = {
          // 这里依赖的状态就是store传入过来的状态
          storeState: mapStateToProps(context.getState())
        }
      }

      componentDidMount() {
        this.unsubscribe = this.context.subscribe(() => {
          this.setState({
            storeState: mapStateToProps(this.context.getState())
          })
        })
      }

      componentWillUnmount() {
        this.unsubscribe()
      }
      
      // 1.传入上一级的props
      // 2.传入对应的state
      // 3.传入store原生的dispatch方法
      render() {
        return <WrappedComponent {...this.props}  
                                 {...mapStateToProps(this.context.getState())}  
                                 {...mapDispatchProps(this.context.dispatch)}/>
      }
    }
    EnhanceComponent.contextType = StoreContext

    return EnhanceComponent
  }
}